<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<!-- source http://www.scnoob.com More templates http://www.scnoob.com/moban -->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>手机登录</title>

<link rel="stylesheet" type="text/css" th:href="@{/assets/css/bootstrap.min.css}">

<link rel="stylesheet" type="text/css" th:href="@{/assets/fonts/line-icons.css}">

<link rel="stylesheet" type="text/css"th:href="@{/assets/css/main.css}">

<link rel="stylesheet" type="text/css" th:href="@{/assets/css/responsive.css}">
    <script th:src="@{/assets/js/jquery-min.js}"></script>

    <script>
        var flag = false;
        var flag2 = false;
        $(function () {
            $("#phone").blur(function(){
                var phone = $("#phone").val();
                var pattern = /^1(3[0-9]|4[5,7]|5[0,1,2,3,5,6,7,8,9]|6[2,5,6,7]|7[0,1,7,8]|8[0-9]|9[1,8,9])\d{8}$/;
                var isFlag = pattern.test(phone);
                if(!isFlag){
                    $("#phoneTiShi").text("手机号格式错误");
                    flag = false;
                }else {
                    $("#phoneTiShi").text("");
                    flag = true;
                }
            });


            $("#passwd").blur(function(){
                var reg = /^.{6,}$/;
                var passwd = $("#passwd").val();
                if(!reg.test(passwd)){
                    $("#passwdTiShi").text("密码至少六位");
                    flag2=false;
                }else{
                    $("#passwdTiShi").text("");
                    flag2 =true;
                }
            });
        });

        function login() {
            var phone = $("#phone").val();
            var passwd = $("#passwd").val();
            var phoneTiShi = $("#phoneTiShi");
            if (phone == null || phone === "" || phone === undefined) {
                $("#phoneTiShi").text("请输入手机号");
                flag = false;
            }
            if (passwd == null || passwd === "") {
                $("#passwdTiShi").text("请输入密码");
                flag2 = false;
            }
            if(flag === true&&flag2 === true){
                $.post("/front/user/sureLogin",
                    {"phone":$("#phone").val(),
                        "passwd":$("#passwd").val()},
                    function (data) {
                        if(data.isSuccess == "true"){
                            window.open("/","_self");
                        }else {
                            phoneTiShi.show();
                            phoneTiShi.html(data.message);
                        }
                    }
                )}
        }
    </script>

</head>
<body>
<div class="wrapper-page">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-5 col-md-12 col-xs-12">
<div class="card">
<div class="card-header border-bottom text-center">
<h4 class="card-title">登录</h4>
</div>
<div class="card-body">
    <form class="form-horizontal m-t-20">
        <div class="form-group">
            <div style="color:red;height: 24px;" id="phoneTiShi" ></div>
        <input class="form-control" type="text" required="" placeholder="手机号码" id="phone">
        </div>
        <div class="form-group">
            <div style="color:red;height: 24px;" id="passwdTiShi" ></div>
        <input class="form-control" type="password" required="" placeholder="密码" id="passwd">
        </div>
        <div class="form-group">
        <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="customCheck1">
        </div>
        </div>
        <div class="form-group text-center m-t-20">
        <button class="btn btn-common btn-block" type="button" onclick="login()" id="btn">立即登录</button>
        </div>
        <div class="form-group">
        <div class="float-left">
        <a th:href="@{/front/user/register}" class="text-muted"><i class="lni-userEntity"></i> 创建账户？</a>
        </div>
        <div class="float-right">
            <a th:href="@{/front/user/forgetPassword}" class="text-muted"><i class="lni-userEntity"></i> 忘记密码？</a>
        </div>
        </div>
    </form>
</div>
</div>
</div>
</div>
</div>
</div>

<div id="preloader">
<div class="loader" id="loader-1"></div>
</div>


<script th:src="@{/assets/js/jquery-min.js}"></script>
<script th:src="@{/assets/js/popper.min.js}"></script>
<script th:src="@{/assets/js/bootstrap.min.js}"></script>
<script th:src="@{/assets/js/jquery.app.js}"></script>
<script th:src="@{/assets/js/main.js}"></script>
</body>

<!-- source http://www.scnoob.com More templates http://www.scnoob.com/moban -->
</html>